<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>控制快进、显示时间进度</title>
    <style>
        video {
            background: black;
        }
    </style>
</head>
<body>
<div>
    <button id="playback-controller">Play</button>
    <button id="mute-controller">Mute</button>
    <label for="volume-controller"><input id="volume-controller" type="range"></label>
    <label for="seek-controller"><input id="seek-controller" type="range"></label>
</div>
<video id="ddd-video" controls="controls">
    <source src="">
    <source src="">
</video>
<script>
    var video = document.getElementById('bbb-video');
    var playButton = document.getElementById('playback-controller');
    var muteButton = document.getElementById('mute-controller');
    var volumeSlider = document.getElementById('volume-controller');
    var seekSlider = document.getElementById('timeupdate-controller');

    function pauseHandler(e) {
        playButton.innerHTML = 'Resume';
    }

    function playingHandler(e) {
        playButton.innerHTML = 'Pause';
    }

    function volumechangeHandler(e) {
        muteButton.innerHTML = video.muted ? 'Unmute' : 'Mute';
    }

    function durationchangeHandler(e) {
        seekSlider.max = video.duration;
    }

    function timeupdateHandler(e) {
        seekSlider.value = video.currentTime;
    }

    function playbackClick(e) {
        video.paused ? video.play() : video.pause();
    }

    function muteClick(e) {
        video.muted = !video.muted;
    }

    function volumeSliderInput(e) {
        video.volume = e.target.value;
    }

    video.addEventListener('pause', pauseHandler);
    video.addEventListener('playing', playingHandler);
    video.addEventListener('volumechange', volumechangeHandler);
    video.addEventListener('durationchange', durationchangeHandler);
    video.addEventListener('timeupdate', timeupdateHandler);

    playButton.addEventListener('click', playbackClick);
    muteButton.addEventListener('click', muteClick);
    volumeSlider.addEventListener('input', volumeSliderInput);
</script>
</body>
</html>